<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <el-form :inline="true">
            <el-form-item>
              <el-select placeholder="请选择" v-model="sort">
                <el-option value="asc">升序</el-option>
                <el-option value="desc">降序</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label-width="80px">
              <el-input placeholder="输入图片名字" v-model="keyword"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="getimagelist">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="success" @click="dialogFormVisible = true"
            >创建相册</el-button
          >
          <el-button type="primary">上传图片</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside width="300px">
          <ul>
            <li
              v-for="(item, index) in list"
              :key="index"
              :class="{ act: item.id == cid }"
              @click="changelist(item.id)"
            >
              <span>{{ item.name }}</span>
              <el-dropdown @command="changeDrop">
                <span class="el-dropdown-link">
                  {{ item.images_count }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="{ type: 'edit', obj: item }"
                    >修改</el-dropdown-item
                  >
                  <el-dropdown-item :command="{ type: 'del', id: item.id }"
                    >删除</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </el-aside>
        <el-main>
          <el-row type="flex">
            <el-col :span="6" v-for="(item, index) in imglist" :key="index">
              <el-card :body-style="{ padding: '0px' }">
                <img
                  :src="item.url"
                  alt=""
                  style="width: 100%; height: 150px"
                />
                <p>{{ item.name }}</p>
                <div style="padding: 14px">
                  <el-button type="text" class="button" @click="upname(item)"
                    >编辑</el-button
                  >
                  <el-button type="text" class="button" @click="deltp(item.id)"
                    >删除</el-button
                  >
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <el-footer>
        <el-pagination
          @current-change="changepage"
          @sie-change="sizechange"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-footer>
    </el-container>

    <!-- 添加相册 -->
    <el-dialog title="添加相册" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="相册名称" :label-width="'80px'">
          <el-input
            autocomplete="off"
            v-model="class_name"
            placeholder="请输入相册名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="'80px'">
          <el-input-number
            v-model="class_order"
            label="相册排序"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addimg">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑相册 -->
    <el-dialog title="编辑相册" :visible.sync="class_form1">
      <el-form>
        <el-form-item label="相册名称" :label-width="'80px'">
          <el-input
            autocomplete="off"
            v-model="classEdit.name"
            placeholder="请输入相册名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="'80px'">
          <el-input-number
            v-model="classEdit.order"
            label="相册排序"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="class_form1 = false">取 消</el-button>
        <el-button type="primary" @click="updataimg">保存</el-button>
      </div>
    </el-dialog>

    <!-- 修改图片名称 -->
    <el-dialog title="名称修改" :visible.sync="up">
      <el-form>
        <el-form-item label="名称" :label-width="'80px'">
          <el-input v-model="imgName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="up = false">取 消</el-button>
        <el-button type="primary" @click="bycupdata">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      bycselect: "",
      list: [],
      cid: "", //相册分类id
      page: 1,
      limit: 3,
      keyword: "",
      sort: "",
      imglist: [],
      total: 0,
      dialogFormVisible: false,
      // 相册表单数据
      class_name: "",
      class_order: 0,
      // 编辑相册
      class_form1: false,
      classEdit: {
        name: "",
        order: "",
        id: "",
      },
      up: false,
      imgName: "",
      upid: "",
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    getlist() {
      this.$axios
        .get("/api/imageclass/1")
        .then((res) => {
          // console.log(res);
          this.list = res.data.list;
          this.cid = res.data.list[0].id;
          this.getimagelist();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getimagelist() {
      this.$axios
        .get(
          `/api/imageclass/${this.cid}/image/${this.page}?limit=${this.limit}&order=${this.sort}&keyword=${this.keyword}`
        )
        .then((res) => {
          this.imglist = res.data.list;
          this.total = res.data.totalCount;
        });
    },
    changelist(id) {
      this.cid = id;
      this.page = 1;
      this.getimagelist();
    },
    changepage(page) {
      this.page = page;
      this.getimagelist();
    },
    sizechange(size) {
      this.page = 1;
      this.limit = size;
      this.getimagelist();
    },
    addimg() {
      if (this.class_name == "" || this.class_order == "") {
        this.$message.error("请输入内容");
        return false;
      }

      this.$axios
        .post("/api/imageclass", {
          order: this.class_order,
          name: this.class_name,
        })
        .then((res) => {
          this.$message.success("添加成功");
          this.dialogFormVisible = false;
          this.getimagelist();
        })
        .catch((error) => {
          this.$message.error("添加失败");
        });
    },
    changeDrop(data) {
      //修改第一步  显示修改框
      if (data.type == "edit") {
        this.class_form1 = true;
        this.classEdit = {
          name: data.obj.name,
          order: data.obj.order,
          id: data.obj.id,
        };
      }
      //删除
      if (data.type == "del") {
        this.$axios.delete(`/api/imageclass/${data.id}`).then((res) => {
          this.$message.success("删除成功");
          this.getlist();
        });
      }
    },
    //修改第二步
    updataimg() {
      this.$axios
        .post(`/api/imageclass/${this.classEdit.id}`, {
          name: this.classEdit.name,
          order: this.classEdit.order,
        })
        .then((res) => {
          this.class_form1 = false;
          this.$message.success("修改成功");
          this.getlist();
        });
    },
    upname(item) {
      this.up = true;
      this.imgName = item.name;
      this.upid = item.id;
    },
    //图片修改名称
    bycupdata() {
      this.$axios
        .post(`/api/image/${this.upid}`, { name: this.imgName })
        .then((res) => {
          this.$message.success("修改成功");
          this.up = false;
          this.getimagelist();
        });
    },
    deltp(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            this.$axios.delete(`/api/image/${id}`).then(res=>{
              this.$message.success("删除成功")
              this.getimagelist()
            })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //生命周期
  created() {},
  mounted() {
    this.getlist();
    this.getimagelist();
  },
};
</script> 

<style scoped lang="scss">
.el-pagination {
  margin-top: 15px;
}
.el-row {
  flex-wrap: wrap;
}
.el-col {
  padding: 10px;
}
.el-container {
  width: 100%;
  .el-header {
    width: 100%;
    height: 70px !important;
    border-top: 1px solid palevioletred;
    background: #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-aside {
    min-height: 750px;
    overflow: scroll;
    ul {
      width: 100%;
      list-style: none;
      padding: 0px;
      li {
        display: flex;
        padding: 20px 0px;
        font-size: 16px;
        border-bottom: 1px solid cadetblue;
        justify-content: space-between;
      }
      li.act {
        color: #00bb00;
        background: lemonchiffon;
      }
    }
  }
}
.el-footer {
  width: 100%;
  background: whitesmoke;
}

.el-main {
  padding: 0;
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
